import {
  AppstoreOutlined, PieChartOutlined,MailOutlined,CloudDownloadOutlined} from '@ant-design/icons';
import { Layout, Menu, Image,Avatar ,Button,Form,Row, Col} from 'antd';
import { BrowserRouter as Router, Switch,Route,Link} from "react-router-dom";
import ShowUser from "../view/ShowUser";
import  Update  from '../view/Update';
import React from 'react';
import  "./css/App.css"
import AddStu from '../view/AddUser';
import Index from '../view/Index';
import DBlist from '../view/DBlist'
import a from './img/a.png'



const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
class App extends React.Component {
  state = {
    collapsed: false,
  };

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  //退出登录
  exit=()=>{
    localStorage.removeItem("isLogin")
    localStorage.removeItem("adminToken")
    window.location.reload()
  }
  

  render() {
    return (
      <Router>
            <Layout>
          <Header className="header">
            <Row>
                <Col span={2}>  <img src={a} style={{ width:100 }}></img></Col>
                <Col span={4}>  <h1 className='welcome1'>后台管理系统</h1></Col>
                <Col span={14}></Col>
                <Col span={2}>               <h1 className='welcome1'>欢迎你：{this.props.isLogin}</h1></Col>
                <Col span={1}>     <Avatar className='welcome2' src={<Image src="http://localhost/a.jpeg" style={{ width:60 }} />} /></Col>
                <Col span={1}>              <Button  icon={	<CloudDownloadOutlined />}  className='exit' onClick={this.exit} >退出</Button></Col>
            </Row>
          </Header>

      <Layout >
            <Sider  collapsed={this.state.collapsed} width={200} height={"100%"}  style={{ background: '#fff' ,height:"100%"}}>

        <Menu
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          mode="inline"
          theme="dark"
          className='menu-container'
        >
          <Menu.Item key="1" icon={<PieChartOutlined />}>
          <div><Link to="/index"></Link></div>
           主页
          </Menu.Item>
          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="用户管理">
            <Menu.Item key="2">
            <div><Link to="/showuser"></Link></div>
           用户查询
            </Menu.Item>
            <Menu.Item key="3">
            <div><Link to="/addstu"></Link></div>
            添加用户
            </Menu.Item>
            <Menu.Item key="4">
            <div><Link to="/update"></Link></div>
            更新用户
            </Menu.Item>
          </SubMenu>
          <SubMenu key="sub1" icon={<MailOutlined />} title="文件管理">
            <Menu.Item key="5">
            <Link to="/dblist"></Link>
            文件显示
            </Menu.Item>
            <Menu.Item key="6">
            <Link to="/index"></Link>
            文件修改
            </Menu.Item>         
          </SubMenu>
          <SubMenu key="sub3" icon={<AppstoreOutlined />} title="系统设置">
            <Menu.Item key="7">系统设置</Menu.Item>
            <Menu.Item key="8">系统设置</Menu.Item>
          </SubMenu>
          </Menu>
          </Sider>
          <Layout style={{ padding: '0 24px 24px' }}>

              <Content
                style={{
                  background: '#fff',
                  padding: 24,
                  margin: 0,
                  minHeight: 280,
                }}
              >
            <Switch>
            <Route path="/addstu">
              <AddStu />
            </Route>
            <Route path="/users">
              <Users />
            </Route>
            <Route path="/dblist">
              <DBlist />
            </Route>
            <Route path="/update">
              <Update />
            </Route>
            <Route path="/showuser">
              <ShowUser />
            </Route>
            <Route path="/">
              <Index name={this.props.isLogin} />
            </Route>
          </Switch>


              </Content>
              </Layout>
            </Layout>
            </Layout>
          

       



        
      </Router>
    );
  }
}


function Users() {
  return <h2>Users</h2>;
}


export default App